import { onCLS, onFCP, onINP, onLCP, onTTFB } from "web-vitals";
import { lazyReportCache } from "../report";

export default function performance() {
  // first containt paint
  onFCP(sendToAnalytics);

  // 最大可见内容在视口中完全渲染的时间点
  onLCP(sendToAnalytics);

  // CLS 是衡量页面视觉稳定性的重要指标
  // 假设页面中有一张未设置尺寸的图片，加载后图片撑开页面布局，导致下方的按钮向下移动了视口高度的 30%，并且按钮占据了视口面积的 20%。则 CLS 值为：
  // CLS = 0.3（位移分数） × 0.2（影响分数） = 0.06
  onCLS(sendToAnalytics); 

  // 用户与页面交互的响应速度 (INP 替代了已弃用的 FID)
  // INP 测量从用户交互到下一次绘制的时间，提供更全面的交互性能指标
  onINP(sendToAnalytics);

  // TTFB 是衡量服务器响应速度的关键指标
  // 从浏览器发起请求到接收到服务器返回的第一个字节的时间间隔。
  onTTFB(sendToAnalytics);
}

function sendToAnalytics(metric) {
  const data = {
    name: metric.name,
    value: metric.value,
    rating: metric.rating,
    delta: metric.delta
  }
  lazyReportCache('performance', data);
}

